<!DOCTYPE html>
<html>
<head>
	<title>extends options</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
	<h1>extends options</h1>
	<hr>
	<div id="app">
		${num}
		<button @click="add">add</button>
	</div>
	<script type="text/javascript">
		var vue  = new Vue({
			el: '#app',
			data: {
				num: 1
			},
			updated: function() {
				console.log('原生的updated')
			},
			methods: {
				add: function () {
					console.log('原生的add');
					this.num ++;
				}
			},
			// 扩展里面的methods方法和原生的methods方法重名的时候就不会执行扩展里面的方法，这是因为执行的顺序：扩展-》原生，和mixins类似
			extends: {
				updated: function() {
					console.log('扩展的updated');
				},
				methods: {
					add: function() {
						this.num ++;
					}
				}
			},
			// 指定插值定界符，这里是个数组，里面的元素是指定‘插值’前后的包裹形式
			// 指定后‘{{}}’就不可使用了
			delimiters: ['${', '}'],

		})
	</script>
</body>
</html>